<template>
  <div>
    <ul class="page-list">
      <li @click="changePage(1)">
        <i class="iconfont icon-xiangzuo"></i>
      </li>
      <template v-for="(item,key) in temp_page">
        <li :key="item" :class="item == current_page ? 'page-active' : ''" @click="change(item)">{{item}}</li>
        <li v-if="key == 3 && last_page > 5 && temp_page[0] < last_page - 5" @click="pageMore()">...</li>
      </template>
      <li @click="changePage(2)">
        <i class="iconfont icon-xiangyou"></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: { page: {}, last: {} },
  data() {
    return {
      current_page: 1,
      last_page: 1,
      temp_page: [],
      start_page: 0
    }
  },
  mounted() {
    this.getPageArr(1)
    this.current_page = this.page
    this.last_page = this.last
  },
  methods: {
    //设置页码数组
    getPageArr(page) {
      this.temp_page = []
      var start = 1
      var end = 5
      var len = this.last_page - page
      if (this.last_page > 5 && len > 3) {
        if (page > 3) {
          start = page - 2
          end = page + 3
        }
      }
      if (this.last_page > 5 && len <= 3) {
        if (page > 3) {
          end = page + len
          start = page - 5 + len
        }
      }
      if (this.last_page < 5) {
        end = this.last_page
      }
      for (var i = start; i <= end; i++) {
        this.temp_page.push(i)
      }
      if (end <= this.last_page - 1) {
        this.temp_page[5] = this.last_page
        this.temp_page[4] = this.last_page - 1
      }
    },
    //更多页码
    pageMore() {},
    //选择页码
    change(item) {
      if (item == this.current_page) return false
      this.current_page = item
      this.$emit('change', item)
    },
    //增减页码
    changePage(param) {
      if (param == 1) {
        if (this.current_page <= 1) return false
        this.current_page--
      } else {
        if (this.current_page >= this.last_page) return false
        this.current_page++
      }
      this.$emit('change', this.current_page)
    }
  },
  watch: {
    current_page(o, v) {
      this.getPageArr(o)
    },
    last_page(o, v) {
      this.getPageArr(this.current_page)
    }
  }
}
</script>

<style>
.page-list {
  display: inline-block;
  height: 30px;
  margin: auto;
  overflow: hidden;
  user-select: none;
}
.page-list > li {
  float: left;
  width: 60px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  color: #999;
  transition: all 0.1s linear;
}
.page-list > li.page-active {
  color: #333;
  font-size: 16px;
}
.page-list > li i {
  font-size: 16px;
}
</style>